<template>
  <Dialog
    title="编辑开始节点"
    :model-value="visible"
    width="1300px"
    max-height="700px"
    :before-close="closeForm"
  >
    <el-tabs v-model="active">
      <el-tab-pane label="基础信息" name="basic">
        <Form
          :schema="schema"
          :model="node"
          @register="formRegister"
          :isCol="false"
          label-width="200px"
          :rules="rules"
        />
        <div v-if="readonly == false" style="text-align: center; width: 100%">
          <el-space>
            <BaseButton type="primary" @click="save">保存</BaseButton>
            <BaseButton @click="resetForm">重置</BaseButton>
          </el-space>
        </div>
      </el-tab-pane>
      <el-tab-pane label="表单配置" name="formEdit">
        <nodeFormEdit
          :readonly="readonly"
          :def-form-id="defFormId"
          :source="source"
          :flow-id="flowId"
          :node-id="nodeId"
          :is-load="active == 'formEdit'"
          @refresh="saveForm"
        />
      </el-tab-pane>
      <el-tab-pane label="表单权限" name="formPower">
        <nodeFormPower
          :readonly="readonly"
          :flow-id="flowId"
          :form-id="curFormId"
          :is-allow-edit="source.IsAllowEdit"
          :node-id="nodeId"
          :is-load="active == 'formPower'"
        />
      </el-tab-pane>
      <el-tab-pane label="审批事件" name="nodeEv">
        <nodeEventEdit
          :filter-event="(val) => val <= 1"
          :readonly="readonly"
          :flow-id="flowId"
          :node-id="nodeId"
          v-model:node-event="source.NodeEvent"
          :is-load="active == 'nodeEv'"
        />
      </el-tab-pane>
    </el-tabs>
  </Dialog>
</template>

<script>
import { DictItemDic, FlowEventList, EnumDic } from '@/flow/config/flowConfig'
import * as flowNodeApi from '@/flow/api/flowNode'
import nodeFormEdit from './nodeFormEdit.vue'
import nodeFormPower from './nodeFormPower.vue'
import nodeEventEdit from './nodeEventEdit.vue'
import { Dialog } from '@/components/Dialog/'
import { Form } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
const { formRegister, formMethods } = useForm()
export default {
  components: {
    nodeFormEdit,
    nodeFormPower,
    nodeEventEdit,
    Dialog,
    Form
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    nodeId: {
      type: String,
      default: null
    },
    flowId: {
      type: String,
      default: null
    },
    defFormId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      schema: [],
      node: {
        NodeCode: null,
        FuncList: [],
        LimitTime: null,
        OutPolicy: null
      },
      active: 'basic',
      curFormId: null,
      source: {},
      timeOutOpt: {
        4: '转办人',
        5: '加签人',
        6: '委托人'
      },
      auditFunc: [
        {
          value: 'IsAllowCancel',
          label: '是否允许撤回'
        },
        {
          value: 'IsUpFile',
          label: '允许上传附件'
        },
        {
          value: 'IsUpFileSign',
          label: '对上传附件签名'
        }
      ]
    }
  },
  computed: {},
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.active = 'basic'
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    formRegister,
    initScheme() {
      const list = [
        {
          field: 'NodeCode',
          label: '节点编号',
          component: 'Label'
        },
        {
          field: 'FuncList',
          label: '审核功能开关',
          component: 'CheckboxGroup',
          componentProps: {
            disabled: this.readonly,
            options: this.auditFunc
          }
        }
      ]
      list.push({
        field: 'OutPolicy',
        label: '存在多个可入节点时',
        component: 'EnumItem',
        componentProps: {
          style: {
            width: '200px'
          },
          dicKey: EnumDic.FlowNodeOutPolicy,
          readonly: this.readonly,
          sysHead: 'flow',
          placeholder: '存在多个可入节点时处理方式'
        }
      })
      this.schema = list
    },
    saveForm(data) {
      this.source.FormId = data.FormId == null ? null : data.FormId
      this.source.IsAllowEdit = data.IsAllowEdit
      this.curFormId = data.FormId == null ? this.defFormId : data.FormId
    },
    async save() {
      const data = await formMethods.validate()
      if (data == null) {
        return
      }
      this.set(data)
    },
    async set(val) {
      const data = {
        OutPolicy: val.OutPolicy,
        IsAllowCancel: val.FuncList.includes('IsAllowCancel'),
        IsUpFile: val.FuncList.includes('IsUpFile'),
        IsUpFileSign: val.FuncList.includes('IsUpFileSign')
      }
      await flowNodeApi.SetBeginNode(this.nodeId, data)
      this.$message({
        message: '更新成功!',
        type: 'success'
      })
    },
    async reset() {
      const data = await flowNodeApi.Get(this.nodeId)
      this.source = data
      this.resetForm()
    },
    closeForm() {
      this.$emit('update:visible', false)
      this.$emit('close', false)
    },
    resetForm() {
      const funcList = []
      if (this.source.IsAllowCancel) {
        funcList.push('IsAllowCancel')
      }
      if (this.source.IsUpFile) {
        funcList.push('IsUpFile')
      }
      if (this.source.IsUpFileSign) {
        funcList.push('IsUpFileSign')
      }
      this.node = {
        NodeCode: this.source.NodeCode,
        FuncList: funcList,
        OutPolicy: this.source.OutPolicy
      }
      this.curFormId = this.source.FormId == null ? this.defFormId : this.source.FormId
      this.initScheme()
    }
  }
}
</script>
